<template>
  <div class="request-settings">
    <el-form label-width="150px">
      <el-form-item label="超时时间">
        <el-input-number
          v-model="settings.timeout"
          :min="0"
          :max="300000"
          :step="1000"
          @change="updateSettings"
        />
        <span class="form-tip">毫秒 (0 表示无限制)</span>
      </el-form-item>
      
      <el-form-item label="跟随重定向">
        <el-switch
          v-model="settings.followRedirect"
          @change="updateSettings"
        />
        <span class="form-tip">自动跟随 3xx 重定向</span>
      </el-form-item>
      
      <el-form-item label="最大重定向次数">
        <el-input-number
          v-model="settings.maxRedirects"
          :min="0"
          :max="20"
          :disabled="!settings.followRedirect"
          @change="updateSettings"
        />
      </el-form-item>
      
      <el-form-item label="验证SSL证书">
        <el-switch
          v-model="settings.verifyCertificate"
          @change="updateSettings"
        />
        <span class="form-tip">HTTPS 请求时验证服务器证书</span>
      </el-form-item>
      
      <el-form-item label="代理">
        <el-input
          v-model="settings.proxy"
          placeholder="http://127.0.0.1:8080"
          @input="updateSettings"
        />
      </el-form-item>
      
      <el-form-item label="保存到历史">
        <el-switch
          v-model="settings.saveToHistory"
          @change="updateSettings"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'RequestSettings',
  props: {
    settings: {
      type: Object,
      default: () => ({
        timeout: 30000,
        followRedirect: true,
        maxRedirects: 5,
        verifyCertificate: true,
        proxy: '',
        saveToHistory: true
      })
    }
  },
  methods: {
    updateSettings() {
      this.$emit('update', this.settings)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.request-settings {
  .form-tip {
    margin-left: $spacing-base;
    color: $text-secondary;
    font-size: $font-size-small;
  }
}
</style>